<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <script src="../vue2.js"></script>
</head>
<body>
<div id="box">
    {{count}}

<!--    事件处理三种方法：-->
<!--    (1).监听事件-直接写触发代码-->
<!--    (2).方法事件处理器-写函数名-->
<!--    (3).内联处理器方法-执行函数表达式-->

    <button @click="count++">add(1)-表达式</button>
    <button @click="handleAdd1">add(2)-函数名</button>   <!--不加小括号，会自动给函数传入事件对象-->
    <button @click="handleAdd2($event)">add(3)-函数表达式</button>   <!-- $event：事件对象-->


    <br><br>

    <label>
        <input type="text" @input="filterData($event,1,2,3)">   <!-- $event ：说明需要传入的是事件对象，这样既可以传参数，也可以传事件对象-->
    </label>

    <br>

    <ul @click.self="handleULClick">   <!-- 事件修饰符self: 点击自己才触发，冒泡上来的不触发-->
        <li @click.stop="handleLIClick">1111</li>   <!-- 事件修饰符stop: Vue阻止事件冒泡方法-->
        <li @click.capture="handleLIClick">2222</li>   <!-- 事件修饰符capture: 改变冒泡顺序，加上capture的先冒泡，再按顺序-->
        <li @click.once="handleLIClick">3333</li>   <!-- 事件修饰符once: 只能触发一次-->
    </ul>


<!--    按键修饰符-->
    <input type="text" @keyup.enter="handleKeyup" >
    <input type="text" @keyup.13="handleKeyup" >
    <!--.esc, .up, ...常用的键都可以用直接用，还可以直接绑定键值 .键值-->
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            count: 0,
            inputText: '',
        },
        methods: {
            handleAdd1() {
                this.count++
            },
            handleAdd2(e) {
                // console.log(e.target)   //得到得到整个事件对象：<button>add(2)-函数名</button>
                this.count++
            },
            filterData(e,a,b,c) {
                console.log(e.target.value,a,b,c)   //不使用v-model，而是通过函数名办法拿到input整个事件对象，再获取其value值
            },
            handleLIClick(e){
                // e.stopPropagation()   //阻止事件冒泡，但是这是DOM的使用方法，Vue阻止事件冒泡方法为使用事件修饰符stop
                console.log("li")

            },
            handleULClick(){
                console.log("ul")
            },
            handleKeyup(e){
                // console.log('keyup',e.keyCode)
                // if (e.keyCode===13){
                    console.log('li add',e.target.value)
                // }
            }
        }
    })
</script>
</body>
</html>